<script setup lang="ts">
import UiHeader from './header.vue'
import UiAside from './aside.vue'
import UiTabs from './tabs.vue'
import { ref } from 'vue';

const cls = 'ui-layout-default'

const isFold = ref(false)
</script>

<template>
  <div :class="cls">
    <UiAside :collapse="isFold" />
    <div :class="`${cls}_content`">
      <UiHeader v-model:fold="isFold" />
      <UiTabs />
      <main :class="`${cls}_view`">
        <RouterView />
      </main>
    </div>
  </div>
</template>

<style lang="scss">
.ui-layout-default {
  height: 100vh;
  display: flex;
  > * {
    height: 100%;
  }
  &_content {
    flex: 1;
    width: 0;
    display: flex;
    flex-direction: column;
  }
  &_view {
    flex: 1;
    height: 0;
    padding: var(--page-margin);
    overflow-y: auto;
  }
}
</style>
